
<template>
  <div class="container">
    <div class="sidebar">
      <!-- 左侧菜单列表 -->
      <h1 class="content">餐具库存搜索</h1>
      <el-menu class="menu" router>
        <el-submenu index="bowl">
          <template slot="title">碗</template>
          <el-menu-item index="goldenBowl">镶金碗</el-menu-item>
          <el-menu-item index="ceramicBowl">瓷碗</el-menu-item>
        </el-submenu>
        <el-submenu index="chopsticks">
          <template slot="title">筷子</template>
          <el-menu-item index="goldenChopsticks">镶金筷</el-menu-item>
          <el-menu-item index="woodenChopsticks">木筷</el-menu-item>
        </el-submenu>
        <el-submenu index="knife">
          <template slot="title">刀</template>
          <el-menu-item index="goldenChopsticks">镶金刀</el-menu-item>
          <el-menu-item index="woodenChopsticks">瓷刀</el-menu-item>
        </el-submenu>
        <el-submenu index="fork">
          <template slot="title">叉</template>
          <el-menu-item index="goldenChopsticks">镶金叉</el-menu-item>
          <el-menu-item index="woodenChopsticks">铝铁合金叉</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <div class="content">
      <div class="header">
        <!-- 搜索按钮 -->
        <el-input class="search-input" v-model="keyword" placeholder="请输入关键字" size="medium">
          <el-button slot="append" icon="el-icon-search" size="medium" @click="search">搜索</el-button>
        </el-input>
        <el-button class="back-button" @click="goBack" plain size="small">返回到页面</el-button>
      </div>

      <div class="table">
        <el-table :data="filteredData" style="width: 100%">
          <el-table-column label="餐具编号" prop="id"></el-table-column>
          <el-table-column label="餐具名称" prop="name"></el-table-column>
          <el-table-column label="数量" prop="quantity"></el-table-column>
          <el-table-column label="材质" prop="specification"></el-table-column>
          <el-table-column label="所属航空公司" prop="company"></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '',
        utensilsData: [
          {
            id: '001',
            name: '刀',
            quantity: 10,
            specification: '金属',
            company: 'AAA航空公司',
            remark: '无'
          },
          {
            id: '002',
            name: '叉',
            quantity: 15,
            specification: '金属',
            company: 'BBB航空公司',
            remark: '有把手'
          },
          {
            id: '003',
            name: '碗',
            quantity: 20,
            specification: '瓷器',
            company: 'AAA航空公司',
            remark: '蓝色花纹'
          },
          {
            id: '004',
            name: '筷子',
            quantity: 30,
            specification: '木制',
            company: 'CCC航空公司',
            remark: '无'
          },
          {
            id: '005',
            name: '勺子',
            quantity: 25,
            specification: '不锈钢',
            company: 'BBB航空公司',
            remark: '可折叠'
          },
          {
            id: '006',
            name: '餐盘',
            quantity: 40,
            specification: '塑料',
            company: 'DDD航空公司',
            remark: '三个分区'
          },
          {
            id: '007',
            name: '杯子',
            quantity: 35,
            specification: '玻璃',
            company: 'EEE航空公司',
            remark: '陶瓷把手'
          },
          {
            id: '008',
            name: '纸巾',
            quantity: 50,
            specification: '纸质',
            company: 'AAA航空公司',
            remark: '无'
          },
          {
            id: '009',
            name: '抹布',
            quantity: 15,
            specification: '棉布',
            company: 'FFF航空公司',
            remark: '黄色'
          },
          {
            id: '010',
            name: '锅铲',
            quantity: 12,
            specification: '不锈钢',
            company: 'BBB航空公司',
            remark: '木柄'
          }
        ]
      }
    },
    computed: {
      filteredData() {
        return this.utensilsData.filter(item => {
          // 根据关键字过滤
          if (
            item.id.includes(this.keyword) ||
            item.name.includes(this.keyword) ||
            item.specification.includes(this.keyword)
          ) {
            return true;
          }
          return false;
        });
      }
    },
    methods: {
      search() {
        // 更新搜索结果
      },
      goBack() {
        this.$router.push('/Index');
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
  }

  .sidebar {
    background-color: #f0f0f0;
    width: 240px;
  }

  .content {
    flex-grow: 1;
    padding: 20px;
    color: #00FF;
  }

  .search-input {
    width: 300px;
    margin-right: 10px;
  }

  .header {
    margin-bottom: 20px;
  }

  .table {
    width: 100%;
  }
  </style>
